<script lang="ts" setup>
import { ref } from "vue";

interface ChatItemProps {
  id: string;
  url: string;
  type: "video" | "img";
  bgColor?: string;
  color?: string;
}
withDefaults(defineProps<ChatItemProps>(), {
  color: "#333333"
});

const emit = defineEmits(["play"]);

const onPreview = (img: string) => {
  uni.previewImage({
    urls: [img]
  });
};
</script>
<template>
  <view class="bubble robot-bubble">
    <view class="content">
      <view class="text" :style="{ background: bgColor }">
        <video
          v-if="type === 'video'"
          object-fit="cover"
          class="media"
          src="https://ailaw-1311286543.cos.ap-guangzhou.myqcloud.com/lehuo_shop/video/花下月.mp4"
          :autoplay="false"
          :show-mute-btn="true"
        ></video>
        <image
          v-else
          mode="widthFix"
          class="media"
          src="https://ailaw-1311286543.cos.ap-guangzhou.myqcloud.com/lehuo_shop/video/花下月.mp4"
          @click="
            onPreview(
              'https://ailaw-1311286543.cos.ap-guangzhou.myqcloud.com/lehuo_shop/video/花下月.mp4'
            )
          "
        />
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.text {
  padding: 16px;
  border-radius: 10px;
  border-top-left-radius: 0;
  background-color: var(--bg-robot-bubble);
}
@keyframes load {
  100% {
    transform: translateY(-5px);
  }
}
.export {
  text-align: right;
}
.bubble {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40rpx;
  .content {
    color: #17181c;
    font-size: 14px;
    box-sizing: border-box;
    word-wrap: break-word;
    max-width: 100%;
    text-align: justify;
    position: relative;
  }
  .media {
    width: 430rpx;
    border-radius: 24rpx;
  }
}
</style>
